import { each, isArray, find, filter } from "lodash";
import React, { useState, useEffect } from "react";
import Button from "antd/lib/button";
import { RendererPropTypes } from "@/visualizations/prop-types";
import Upload from "antd/lib/upload";
import message from 'antd/lib/message';
import FileExcelOutlinedIcon from "@ant-design/icons/FileExcelOutlined";

import notification from "@/../../../../client/app/services/notification";
import { axios } from "@/services/axios";
import "./renderer.less";

export default function Renderer({ data, options, visualizationId, onRefreshDashboardHandler, refreshStartedAt }) {
  const [refreshAt, setRefreshAt] = useState(refreshStartedAt);
  const uploadProps = {
    name: 'file',
    showUploadList: false,
    accept: ".xls,.xlsx",
    action: `api/toolbar/excel/${visualizationId}`,
    maxCount:1,
    headers: {
      authorization: 'authorization-text',
    },
    onChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        const successInfo = options.importExcelSuccessInfo || `${info.file.name} 文件上传执行成功！`
        message.success(successInfo);
        setTimeout(()=>{
          onRefreshDashboardHandler(true);          
        }, 2000);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 文件上传执行失败！可能没有当前数据源权限，请联系系统管理员`);
      }
    },
  };  

  useEffect(() => {
    if (!!!refreshAt && !!refreshStartedAt) {
      setRefreshAt(refreshStartedAt);
    } else if (!!refreshAt && !!refreshStartedAt) {
      if (refreshAt.isBefore(refreshStartedAt)) {
        setRefreshAt(refreshStartedAt);
      }
    }
  }, [refreshStartedAt]);

  const showPortal = window.location.search.includes("show_portal") && localStorage.getItem('colorstyle_mode');
  const cssStyle = {
    "--style-color": localStorage.getItem("colorstyle_color"),
  };
  const cssStyles = {
    "--style-color": localStorage.getItem("colorstyle_color"),
    width: '100%',
    minWidth: '100px',
  };
  const cssStylesEdit = {
    width: '100%',
    minWidth: '100px',
  };
  
  const onExportExcelClick = () => {
    const url = `api/toolbar/excel/${visualizationId}` 
    axios.get(url).then(w => {
      if (w===true) {
        const successInfo = options.doSuccessInfo || "执行成功！"
        notification.success(successInfo);
        setTimeout(()=>{
          onRefreshDashboardHandler(true);          
        }, 2000);
      } else { 
        notification.error("执行失败！" + w);
      }
    }).catch(error => {
      notification.error("执行失败！" + error);
    });  
  }

  const onDoClick = () => {
    const url = `api/toolbar/do/${visualizationId}` 
    axios.get(url).then(w => {
      if (w===true) {
        notification.success("执行成功！");
      } else { 
        notification.error("执行失败！" + w);
      }
    }).catch(error => {
      notification.error("执行失败！" + error);
    });  
  }

  return (
    <>
      {options.exportExcel && (
        <Button onClick={onExportExcelClick}>输出Excel</Button>
      )}
      {options.importExcel && (
        <Upload {...uploadProps}>
          <Button><FileExcelOutlinedIcon />Excel导入</Button>
        </Upload>
      )}
      {options.do && (
        <Button onClick={onDoClick}>{options.doTitle}</Button>
      )}
    </>
  );
}

Renderer.propTypes = RendererPropTypes;
